<template>
  <!-- 菜单栏布局 -->
  <div class="parent">
   <el-button @click="flag = !flag">切换组件</el-button>
   <!-- include 缓存哪一个
        exclude 不缓存哪一个
    -->
   <keep-alive :include="['formVue']">
    <formVue v-if="flag"></formVue>
    <B v-else></B>
   </keep-alive>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive, defineAsyncComponent} from 'vue'
 import formVue  from './components/formVue.vue';
 import B  from './components/B.vue';
const flag = ref<boolean>(true)

</script>

<style lang="less">
 html,body,#app{
   height: 100%;
   overflow: hidden;
 }
 .parent{
  height: 100vh;
  background: yellow;
  position: relative;
 }
</style>